<template>
  <div>
    <el-table
      border
      highlight-current-row
      max-height="100%"
      style="height: calc(100% - 5px)"
      v-loading="loading"
      ref="multipleTable"
      :row-key="rowkey"
      :height="height"
      :data="data"
      :span-method="arraySpanMethod"
      :default-expand-all="isexpand"
      tooltip-effect="light"
      :tree-props="treeProps"
      @selection-change="handleSelectionChange"
      :default-sort="defaultsort"
      @row-click="rowclick"
      :header-cell-class-name="cellClass"
      @select="select"
      @select-all="selectAll"
    >
      <template v-for="(item, index) in head" :key="index">
        <!-- 勾选 -->
        <el-table-column
          :align="item.align || 'center'"
          v-if="item.selected"
          type="selection"
          :selectable="handleIsSelect"
          width="45"
        />
        <!-- 序号 -->
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="55"
          v-if="item.showIndex"
        />
        <!-- 单选 -->
        <el-table-column
          align="center"
          label="选择"
          v-if="item.radio"
          width="50"
          style="overflow: hidden"
        >
          <template #default="scope">
            <el-radio
              @change="getCurrentRow(scope.$index, scope.row)"
              :label="scope.$index"
              v-model="radio"
              :disabled="!isEdit"
              style="margin-left: 8px"
              >{{&nbsp;}}</el-radio
            >
          </template>
        </el-table-column>
        <!-- 单选1 -->
        <el-table-column
          align="center"
          label="#"
          v-if="item.radio_1"
          width="50"
          style="overflow: hidden"
        >
          <template #default="scope">
            <el-radio
              @change="getCurrentRow(scope.$index, scope.row)"
              :label="scope.$index"
              v-model="radio"
              :disabled="!isEdit"
              style="margin-left: 0px"
              >{{&nbsp;}}</el-radio
            >
          </template>
        </el-table-column>
        <!-- 自定义表头 -->
        <el-table-column
          :label="item.label"
          :align="item.align || 'center'"
          v-if="item.prop && !item.slot"
          :prop="item.prop"
          show-overflow-tooltip
          :width="item.width"
          :sortable="item.sortable"
        >
          <template #default="scope">
            <span class="line-oversize">{{
              (typeof scope.row[item.prop] == 'string' && scope.row[item.prop].trim() == '') ||
              (typeof scope.row[item.prop] !== 'string' &&
                scope.row[item.prop] == '' &&
                scope.row[item.prop] != 0) ||
              scope.row[item.prop] === null ||
              (!scope.row[item.prop] && scope.row[item.prop] != 0)
                ? '--'
                : scope.row[item.prop]
            }}</span>
          </template>
          <template #header="scope">
            <slot v-if="item.header" :prop="item.label" :name="item.header"></slot>
            <span v-else>{{ item.label }}</span>
          </template>
        </el-table-column>
        <!--  -->
        <el-table-column
          :label="item.label"
          :align="item.align || 'center'"
          v-if="item.slot"
          :prop="item.prop"
          show-overflow-tooltip
          :width="item.width"
          :sortable="item.sortable"
          :fixed="item.fixed"
          :min-width="item.minWidth"
        >
          <template #default="scope">
            <slot :prop="scope.row" :name="item.slot" :index="scope.$index"></slot>
          </template>
          <template #header="scope">
            <slot v-if="item.header" :prop="item.label" :name="item.header"></slot>
            <span v-else>{{ item.label }}</span>
          </template>
        </el-table-column>
        <!-- 按钮 -->
        <el-table-column
          :label="item.label"
          :align="item.align || 'center'"
          v-if="item.buttons"
          :width="item.width"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <el-button
              type="text"
              v-for="(btns, el) in item.buttons"
              :key="el + 'n1'"
              :icon="btns.icon"
              @click="onClick(btns.function, scope.row, scope.$index)"
              >{{ btns.name }}</el-button
            >
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import { ref, nextTick, defineProps, defineEmits } from 'vue'

// 定义组件属性  父向子传值
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  head: {
    type: Array,
    default: () => [],
  },
  treeProps: {
    type: Object,
    default: () => ({}),
  },
  align: {
    type: String,
    default: 'center',
  },
  height: {
    type: [String, Number],
    default: '100%',
  },
  rows: {
    type: Number,
    default: 10,
  },
  rowkey: {
    type: String,
    default: '',
  },
  isexpand: {
    type: Boolean,
    default: false,
  },
  defaultsort: {
    type: Object,
    default: () => ({}),
  },
  total: {
    type: Number,
    default: 0,
  },
  prevText: {
    type: String,
    default: '',
  },
  nextText: {
    type: String,
    default: '',
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: true,
  },
})

// 定义事件    子向父传值
const emit = defineEmits(['onClick', 'getCurrentRow', 'handleSelectionChange','select'.'selectAll','rowclick','change'])

// 组件状态
const multipleTable = ref(null)
const currentPage = ref(1)
const pageSizes = ref([10, 20, 50, 100])
const pageSize = ref(10)
const radio = ref('')

// 组件方法
const settable = () => {
  nextTick(() => {
    if (multipleTable.value) {
      multipleTable.value.doLayout()
    }
  })
}

const cellClass = () => {
  if (props.data && props.data.length === 0) {
    return 'disabledCheck'
  }
}

const onClick = (_function, _row, _index) => {
  if (_row.authority === '管理员') {
    return
  } else {
    let rowData = {
      function: _function,
      row: _row,
      index: _index,
    }
    emit('onClick', rowData)
  }
}

const getCurrentRow = (rowindex, rowData) => {
  emit('getCurrentRow', rowData)
}

const setCurrentRow = (row) => {
  if (multipleTable.value) {
    multipleTable.value.setCurrentRow(row)
  }
}

const handleSelectionChange = (multipleSelection) => {
  emit('handleSelectionChange', multipleSelection)
}

const select = async (selection, row) => {
  if (props.isEdit && multipleTable.value) {
    await multipleTable.value.clearSelection()
    if (selection.length === 0) return
    multipleTable.value.toggleRowSelection(row, true)
  }
  emit('select', selection, row)
}

const selectAll = (selection) => {
  emit('selectAll', selection)
}

const cancelSelection = () => {
  if (multipleTable.value) {
    multipleTable.value.clearSelection()
  }
}

const rowclick = (row) => {
  emit('rowclick', row)
}

const handleSizeChange = (_pageSize) => {
  pageSize.value = _pageSize
  const pageInfo = {
    pageSize: pageSize.value,
    currentPage: currentPage.value,
  }
  change(pageInfo)
}

const handleCurrentChange = (_currentPage) => {
  currentPage.value = _currentPage
  const pageInfo = {
    pageSize: pageSize.value,
    currentPage: currentPage.value,
  }
  change(pageInfo)
}

const change = (pageInfo) => {
  emit('change', pageInfo)
}

const clearSelection = () => {
  if (multipleTable.value) {
    multipleTable.value.clearSelection()
  }
}

const clearRadio = () => {
  radio.value = ''
}

const turnToRow = (item) => {
  if (multipleTable.value && multipleTable.value.bodyWrapper) {
    multipleTable.value.bodyWrapper.scrollTop = multipleTable.value.bodyWrapper.scrollHeight
  }
}

const selectrow = (row) => {
  console.log('调用')
  if (multipleTable.value) {
    multipleTable.value.toggleRowSelection(row, true)
  }
}

const handleIsSelect = (row) => {
  if (row.selectable === 'no' || row.start_state === 1) {
    return false
  } else return true
}

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 可以通过emit将方法暴露出去
  // emit("spanMethod", { row, column, rowIndex, columnIndex });
}

// 暴露方法给父组件   类似于vue2中的refs调用
defineExpose({
  settable,
  setCurrentRow,
  cancelSelection,
  clearSelection,
  clearRadio,
  turnToRow,
  selectrow,
})
</script>

<style lang="scss" scoped>
.pagination-row {
  margin-top: 20px;

  .pagination-count {
    color: #666;
    float: left;
    padding-top: 20px;
    font-size: 13px;
  }

  .pagination {
    padding-top: 20px;
    float: right;

    .btn-prev {
      padding: 0 5px !important;
    }

    .btn-next {
      padding: 0 5px !important;
    }
  }
}

:deep(.el-table--scrollable-x .el-table__body-wrapper) {
  overflow-x: hidden;
}

.el-table {
  font-family: Microsoft YaHei;

  :deep(.disabledCheck > .cell .el-checkbox__inner) {
    display: none !important;
  }

  :deep(th) {
    background: #f6f6f8 !important;
    font-weight: 400 !important;
    font-family: MicrosoftYaHei !important;
    font-weight: bold !important;
    color: #333333 !important;
    font-size: 12px !important;
    border-left: solid 1px #e9edf7 !important;
    border-right: solid 1px #e9edf7;
    border-bottom: solid 1px #e9edf7;
    height: 33px !important;
    padding: 0px !important;
  }

  :deep(td) {
    color: #666666 !important;
    font-size: 12px !important;
    padding: 0px !important;
    border-bottom: solid 1px #e9edf7;
    height: 37px !important;
    border-right: 1px solid #e9edf7 !important;
    font-family: Microsoft YaHei !important;
  }
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #f8fbfd;
}

:deep(.el-table__row:hover > td) {
  background: #e8f2ff !important;
}

:deep(.el-table__body tr.current-row > td) {
  background: #e8f2ff !important;
}

:deep(.el-table__fixed-body-wrapper) {
  top: 33px !important;
}

:deep(.el-table__body-wrapper) {
  height: calc(100% - 33px) !important;
  overflow: auto;
  overflow-x: hidden;
}

:deep(.el-input__inner) {
  border: none !important;
  background: transparent !important;
}

:deep(.el-checkbox) {
  margin-right: 0px !important;
}

.table-fixed {
  :deep(.el-table__fixed-right) {
    height: 100% !important;
  }
  :deep(.el-table__fixed) {
    height: 100% !important;
  }
}
</style>
